{% extends 'home/base.html' %}
{% block title %}Bills{% endblock %}
{% block heading %}Bills{% endblock %}
{% block body %}
    <form action="/bill/pay/" method="POST">{% csrf_token %}
      <ul class="collapsible popout" data-collapsible="accordion">
        <li>
          <div class="collapsible-header"><i class="material-icons">check_box_outline_blank</i>Pending Bills</div>
          <div class="collapsible-body">
            <ul class="collapsible popout" data-collapsible="accordion">
              {% for bill in pendingBills %}
              <li>
                <div class="collapsible-header blue-grey">
                  <i class="material-icons">
                    assignment_turned_in
                  </i>
                  {{bill.item.item_name}} {{bill.quantity}}
                </div>
                <div class="collapsible-body">
                  {% if not isPatient %}
                  <input type="checkbox" class="filled-in" id="filled-in-box{{bill.id}}" name="ids" unchecked value="{{bill.id}}" />
                  <label for="filled-in-box{{bill.id}}"><span>Select</span></label><br>
                  {% endif %}
                  <span>Item</span> <span class="blue-text text-lighten-1">{{bill.item.item_name}}</span><br>
                  <span>Quantity</span> <span class="blue-text text-lighten-1">{{bill.quantity}}</span><br>
                  <span>Date</span> <span class="blue-text text-lighten-1">{{bill.bill_date}}</span><br>
                  <span>Bill Description</span> <span class="blue-text text-lighten-1">{{bill.bill_details}}</span><br>
                  <span>Ammount</span> <span class="blue-text text-lighten-1">{{bill.ammount}}</span><br>
                </div>
              </li>
              {% endfor %}
              {% if not isPatient %}
              <button type="submit" class="btn">Pay</button>
              {% endif %}
            </ul>
          </div>
        </li>
        <li>
          <div class="collapsible-header"><i class="material-icons">check_box</i>Paid Bills</div>
          <div class="collapsible-body">
            <ul class="collapsible popout" data-collapsible="accordion">
              {% for bill in paidBills %}
              <li>
                <div class="collapsible-header blue-grey"><i class="material-icons">assignment_turned_in</i>{{bill.item.item_name}} {{bill.quantity}}</div>
                <div class="collapsible-body">
                  <span>Item</span> <span class="blue-text text-lighten-1">{{bill.item.item_name}}</span><br>
                  <span>Quantity</span> <span class="blue-text text-lighten-1">{{bill.quantity}}</span><br>
                  <span>Date</span> <span class="blue-text text-lighten-1">{{bill.bill_date}}</span><br>
                  <span>Bill Description</span> <span class="blue-text text-lighten-1">{{bill.bill_details}}</span><br>
                  <span>Ammount</span> <span class="blue-text text-lighten-1">{{bill.ammount}}</span><br>
                </div>
              </li>
              {% endfor %}
            </ul>
          </div>
        </li>
      </ul>
    </form>
</div>
{% endblock %}
